<template>
	<view>
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="navigation_title">
				订单详情
			</view>
		</view>
		<view class="detail_con">
			<view class="order_detail_type">
				<view class="order_status">
					{{orderStatus == 0?'未出餐':orderStatus == 1?'待接单':orderStatus == 2? '待取餐':orderStatus == 3? '配送中':'已完成'}}
				</view>
				<!-- <view class="order_time">
					{{orderStatus == 1?'请在00:15:00内进行支付，超时将取消':orderStatus == 2?'该订单已成功支付且发货，请收货':orderStatus==3?'该订单已完成，请您帮忙评价一下吧':orderStatus==4?'该订单已完成，再来下一个订单':'该订单已完成，请您帮忙评价一下吧'}}
				</view> -->
				<view class="order_btns">
					<view class="order_item_cancel" >
						<view class="button" v-if="orderStatus == 1" @tap="takeOrder()">接单</view>
					</view>
					<view class="order_item_cancel" >
						<view class="button" v-if="orderStatus == 2" @tap="tookOrder()">取餐</view>
					</view>
					<view class="order_item_cancel" >
						<view class="button" v-if="orderStatus == 3" @tap="sendOrder()">送达</view>
					</view>
				</view>
			</view>

			<view class="detail_goods">
				<view class="checkout_con_bd">
					<!-- <view class="checkout_store_hd">
						<view class="checkout_store_name">
							{{goodDetail.storeName}}
						</view>
						<view class="checkout_store_phone">
							<image src="../../static/image/shop/mobile.svg" mode=""></image>
						</view>
					</view> -->
					<view class="checkout_goods">
						<view class="checkout_good" v-for="(item,index) in orderList" :key="index">
							<view class="checkout_good_img">
								<image :src="domain + item.goodsImg" mode="aspectFill"></image>
							</view>
							<view class="checkout_good_info">
								<view class="checkout_good_name">
									{{item.goodsName}}
								</view>
								<!-- <view class="checkout_good_type">
									{{item.type}}
								</view> -->
								<view class="checkout_good_other">
									<view class="checkout_good_price">
										¥{{item.price}}
									</view>
									<view class="checkout_good_num">
										x{{item.number}}
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="checkout_money">
						<view class="checkout_lunchbox">
							<view class="checkout_money_label">
								餐盒费
							</view>
							<view class="checkout_money_price">
								¥{{ orderDetail.packAmount || 0 }}
							</view>
						</view>
						<view class="checkout_delivery">
							<view class="checkout_money_label">
								配送费
							</view>
							<view class="checkout_money_price">
								¥{{ orderDetail.deliveryAmount || 0 }}
							</view>
						</view>
						<view class="checkout_delivery">
							<view class="checkout_money_label">
								服务费
							</view>
							<view class="checkout_money_price">
								¥{{ orderDetail.serviceAmount || 0}}
							</view>
						</view>
						<view class="checkout_delivery">
							<view class="checkout_money_label">
								减免费用
							</view>
							<view class="checkout_money_price">
								¥{{ orderDetail.reductionAmount || 0}}
							</view>
						</view>
					</view>
					<view class="checkout_total_price">
						需付<text>¥{{orderDetail.amount}}</text>
					</view>
				</view>
			</view>

			<view class="detail_shipping">
				<view class="detail_shipping_title">
					服务信息
				</view>
				<view class="detail_shipping_list">
					<view class="shipping_item" v-if="orderDetail.business">
						<view class="shipping_label">
							联系商家
						</view>
						<view class="shipping_value">
							{{orderDetail.business.userPhone}} <view class="button"  @tap="toPhone(orderDetail.business.userPhone)">拨打</view>
						</view>
					</view>
					<view class="shipping_item" v-if="orderDetail.riderTwo">
						<view class="shipping_label">
							联系校外骑手
						</view>
						<view class="shipping_value">
							{{orderDetail.riderTwo.userPhone}}<view class="button"  @tap="toPhone(orderDetail.riderTwo.userPhone)">拨打</view>
						</view>
					</view>
					<view class="shipping_item" v-if="orderDetail.riderOne">
						<view class="shipping_label">
							联系校内骑手
						</view>
						<view class="shipping_value">
							{{orderDetail.riderOne.userPhone}}<view class="button"  @tap="toPhone(orderDetail.riderOne.userPhone)">拨打</view>
						</view>
					</view>
					<view class="shipping_item">
						<view class="shipping_label">
							平台售后
						</view>
						<view class="shipping_value">
							{{servicePhone}}<view class="button"  @tap="toPhone(servicePhone)">拨打</view>
						</view>
					</view>
				</view>
			</view>

			<view class="detail_order">
				<view class="detail_order_title">
					配送信息
				</view>
				<view class="message_list">
					<view class="message_item">
						<view class="message_label">
							订单编号
						</view>
						<view class="message_value">
							{{orderDetail.orderNumber}}
						</view>
					</view>
					<view class="message_item">
						<view class="message_label">
							下单时间
						</view>
						<view class="message_value">
							{{orderDetail.createTime}}
						</view>
					</view>
					<view class="message_item">
						<view class="message_label">
							备注信息
						</view>
						<view class="message_value">
							{{orderDetail.remark}}
						</view>
					</view>
					<!-- <view class="message_item">
						<view class="message_label">
							餐具
						</view>
						<view class="message_value">
							1份
						</view>
					</view> -->
				</view>
			</view>
			<view class="detail_order">
				<view class="detail_order_title">
					进程
				</view>
				<uni-steps :options="steps" direction="column" :active="active"></uni-steps>
			</view>
		</view>
	</view>
</template>

<script>
	import server_url from '../../api/config.js'
	import {
		getOrderDetail,
		takeStoreOrder,
		sendStoreOrder,
		getOrderStatus,
		tookStoreOrder
	} from '../../api/api.js'
	export default {
		data() {
			return {
				steps:[],
				active: 0,
				domain: server_url,
				orderStatus: 1,
				taskOption: 1,
				orderDetail: {
					amount: 0,
					createTime: "",
					foodAmount: 0,
					orderNumber: "",
					packAmount: 0,
					payStatus: 0,
					reductionAmount: 0,
					remark: "",
					riderAmount: 0,
					serviceAmount: 0,
					status: 0,
					updateTime: "",
				},
				orderList: [],
				servicePhone:''
			};
		},
		methods: {
			toPhone(phone){
			  uni.makePhoneCall({
			    phoneNumber: phone, //要拨打的手机号
			    success: (res) => {
			      // console.log("调用成功")
			    },
			    fail: (res) => {
			      // console.log('调用失败!')
			    }
			  })
			},
			takeOrder() {
				takeStoreOrder({orderId:this.orderId,taskOption: this.taskOption }).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.backref()
				})
			},
			sendOrder() {
				sendStoreOrder({orderId:this.orderId, taskOption: this.taskOption }).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.backref()
				})
			},
			tookOrder() {
				tookStoreOrder({orderId:this.orderId, taskOption: this.taskOption }).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.backref()
				})
			},
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDetail() {
				getOrderDetail({
					orderNumber: this.orderNumber
				}).then(res => {
					this.orderDetail = res.data.order
					this.orderList = res.data.orderList
					this.servicePhone = res.data.servicePhone
				})
			},
			getStatus() {
				getOrderStatus({orderId: this.orderId}).then(res => {
					this.steps = []
					if (res.data && res.data.length) {
						res.data.forEach(dd => {
							let obj = {
								title: dd.content,
								desc: dd.timestamp
							}
							this.steps.unshift(obj)
						})
						this.active = this.steps.length
						console.log(this.steps)
					}
				})
			}
		},
		onLoad(e) {
			this.orderNumber = e.idd
			this.orderId = e.id
			this.orderStatus = e.status
			this.taskOption = e.taskOption
			this.getDetail()
			this.getStatus()
		}
	}
</script>

<style lang="scss">
	.button {
		width: 168rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 24rpx;
		background: linear-gradient(180deg, rgba(255, 141, 26, 1) 12.5%, rgba(255, 195, 0, 1) 100%);
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 26rpx;
	}
	page {
		background: #F9FBFC;
	}

	.navigation {
		width: 100%;
		height: 150rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #333;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	.detail_con {
		padding: 0 24rpx 40rpx;

		.order_detail_type {
			padding: 28rpx 0;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;

			.order_status {
				font-size: 32rpx;
				color: #2E343A;
				font-weight: 500;
			}

			.order_time {
				color: #2E343A;
				font-size: 28rpx;
				margin-top: 20rpx;
				font-weight: 500;
			}

			.order_btns {
				display: flex;
				margin-top: 26rpx;

				.order_cancel {
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					border: 1rpx solid #D8D8D8;
					border-radius: 8rpx;
					color: #2E343A;
					font-size: 26rpx;
				}

				.order_pay {
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 24rpx;
					background-color: #2588FF;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-size: 26rpx;
				}

				.order_again {
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 24rpx;
					background-color: #2588FF;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-size: 26rpx;
				}

				.order_again2 {
					width: 168rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					border: 1rpx solid #D8D8D8;
					border-radius: 8rpx;
					color: #2E343A;
					font-size: 26rpx;
				}
			}
		}

		.detail_goods {
			padding: 0 24rpx;
			background-color: #fff;
			margin-top: 24rpx;
			border-radius: 12rpx;

			.checkout_con_bd {
				padding: 32rpx;
				background-color: #fff;
				border-radius: 12rpx;
				margin-top: 20rpx;

				.checkout_store_hd {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 32rpx;
					border-bottom: 1rpx solid #E8E7E7;

					.checkout_store_name {
						font-size: 30rpx;
						color: #2E343A;
						font-weight: 700;
					}

					.checkout_store_phone {
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.checkout_goods {
					border-bottom: 1rpx solid #E8E7E7;

					.checkout_good {
						position: relative;
						padding: 24rpx 0;
						display: flex;

						.checkout_good_img {
							image {
								width: 120rpx;
								height: 120rpx;
								border-radius: 12rpx;
							}
						}

						.checkout_good_info {
							padding-top: 15rpx;
							margin-left: 24rpx;

							.checkout_good_name {
								font-size: 28rpx;
								color: #2E343A;
								font-weight: 500;
							}

							.checkout_good_type {
								font-size: 24rpx;
								color: #9098A0;
								margin-top: 8rpx;
							}

							.checkout_good_other {
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								right: 0;
								display: flex;
								flex-direction: column;
								align-items: flex-end;

								.checkout_good_price {
									font-size: 32rpx;
									color: #333333;
									font-weight: 500;
								}

								.checkout_good_num {
									font-size: 24rpx;
									color: #9098A0;
								}
							}
						}
					}
				}

				.checkout_money {
					border-bottom: 1rpx solid #E8E7E7;

					.checkout_lunchbox {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
					}

					.checkout_delivery {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 20rpx;
					}

					.checkout_money_label {
						font-size: 28rpx;
						color: #9098A0;
						font-weight: 500;
					}

					.checkout_money_price {
						font-size: 28rpx;
						color: #333333;
					}
				}

				.checkout_total_price {
					padding-top: 32rpx;
					text-align: right;
					font-size: 24rpx;
					color: #2E343A;

					text {
						font-size: 32rpx;
						color: rgba(255, 141, 26, 1);
						font-weight: 500;
					}
				}
			}
		}

		.detail_shipping {
			padding: 0 24rpx;
			background-color: #fff;
			margin-top: 32rpx;
			border-radius: 12rpx;

			.detail_shipping_title {
				font-size: 32rpx;
				color: #2E343A;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E8E7E7;
			}

			.detail_shipping_list {
				padding: 16rpx 0;

				.shipping_item {
					padding: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.shipping_label {
						font-size: 28rpx;
						color: #2E343A;
					}

					.shipping_value {
						font-size: 28rpx;
						color: #9098A0;
						width: 70%;
						text-align: right;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}
		}

		.detail_order {
			padding: 0 24rpx;
			background-color: #fff;
			margin-top: 32rpx;
			border-radius: 12rpx;

			.detail_order_title {
				font-size: 32rpx;
				color: #2E343A;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E8E7E7;
			}

			.message_list {
				padding: 16rpx 0;

				.message_item {
					padding: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.message_label {
						font-size: 28rpx;
						color: #2E343A;
					}

					.message_value {
						font-size: 28rpx;
						color: #9098A0;
						width: 50%;
						text-align: right;
					}
				}
			}
		}
	}
</style>
